<template>
    <div class="data-info">
        <div class="v-data-info">
            <editor v-model="content"></editor>
        </div>
    </div>
</template>

<script>
    import editor from "@/components/editor/ckeditor5";

    export default {
        data() {
            return {
                content: ''
            }
        },
        components: {editor},
        mounted() {

        }
    }
</script>

<style lang="scss">
    //以下样式要添加到展示页面中
    #editor{
        p {
            margin-bottom: 20px;
        }

        .image {
            display: table;
            clear: both;
            text-align: center;
            margin: 0 auto;
        }

        .image {
            & > img {
                display: block;
                margin: 0 auto;
                max-width: 100%;
            }

            & > figcaption {
                display: table-caption;
                caption-side: bottom;
                word-break: break-word;
                color: #333;
                background-color: #f7f7f7;
                padding: .6em;
                font-size: .75em;
                outline-offset: -1px;
            }
        }

        .table {
            margin: 1em auto;
            display: table;

            table {
                border-collapse: collapse;
                border-spacing: 0;
                width: 100%;
                height: 100%;
                border: 1px double #b3b3b3;
            }

            table th {
                font-weight: 700;
                background: #fafafa;
            }

            table td, table th {
                min-width: 2em;
                padding: .4em;
                border: 1px solid #d9d9d9;
            }
        }

        blockquote {
            overflow: hidden;
            padding-right: 1.5em;
            padding-left: 1.5em;
            margin-left: 0;
            margin-right: 0;
            font-style: italic;
            border-left: 5px solid #ccc;
        }
    }
</style>
